<template>
  <div class="message-container" :class="typeClass" ref="messageRef">
    <div class="message-content">
      <i class="fa" :class="iconClass"></i>
      <span>{{ message }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true,
    },
    type: {
      type: String,
      default: 'info', // info, success, warning, error
      validator: (value) =>
        ['info', 'success', 'warning', 'error'].includes(value),
    },
    duration: {
      type: Number,
      default: 1000,
    },
  },
  computed: {
    typeClass() {
      return `message-${this.type}`
    },
    iconClass() {
      const icons = {
        info: 'fa-info-circle',
        success: 'fa-check-circle',
        warning: 'fa-exclamation-circle',
        error: 'fa-times-circle',
      }
      return icons[this.type] || 'fa-info-circle'
    },
  },
  mounted() {
    this.showMessage()
    setTimeout(() => {
      this.hideMessage()
    }, this.duration)
  },
  methods: {
    showMessage() {
      const el = this.$refs.messageRef
      el.style.opacity = '0'
      el.style.transform = 'translateY(-20px)'
      requestAnimationFrame(() => {
        el.style.transition = 'opacity 0.3s, transform 0.3s'
        el.style.opacity = '1'
        el.style.transform = 'translate(-50%, 0)'
      })
    },
    hideMessage() {
      const el = this.$refs.messageRef
      el.style.opacity = '0'
      el.style.transform = 'translateY(-20px)'
      setTimeout(() => {
        this.$emit('close')
      }, 300)
    },
  },
}
</script>

<style scoped>
.message-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}

.message-content {
  display: flex;
  align-items: center;
}

.message-content i {
  margin-right: 8px;
  font-size: 16px;
}

.message-info {
  background-color: #ebf5ff;
  color: #1d69d4;
}

.message-success {
  background-color: #f0fff4;
  color: #389e0d;
}

.message-warning {
  background-color: #fffbe6;
  color: #d48806;
}

.message-error {
  background-color: #fff2f0;
  color: #cf1322;
}
</style>